<template>
  <div class="followInfoCustomer">
    <el-dialog title="填写跟进记录" :visible.sync="dialogFollowVisible" width="40%">
      <el-form :model="recordform" :rules="rules" ref="recordform" label-width="120px">
        <el-form-item label="跟进状态" prop="followState">
          <el-select v-model="recordform.followState" placeholder="请选择跟进状态" style="width: 60%;">
            <el-option v-for="item in statusList" :key="item.id" :label="item.dictLabel"
                       :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进时间" prop="followTime">
          <el-date-picker v-model="recordform.followTime" placeholder="请选择跟进时间" value-format="yyyy-MM-dd"
                          :picker-options="pickerOptions" style="width: 60%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="跟进方式" prop="followWay">
          <el-radio-group v-model="recordform.followWay">
            <el-radio v-for="item in followWayOptions" :key="item.dictValue" :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="otherWay" v-if="recordform.followWay === '4'" class="other-item">
          <el-input v-model="recordform.otherWay" placeholder="请填写跟进方式" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="跟进内容" prop="followContent">
          <el-checkbox-group v-model="recordform.followContent">
            <el-checkbox v-for="item in followContentOptions" :key="item.dictValue" :label="item.dictValue">
              {{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="" prop="otherContent" v-if="recordform.followContent.includes('7')"
                      class="other-item"
        >
          <el-input v-model="recordform.otherContent" placeholder="请填写跟进内容" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="附件上传" prop="enclosureUrl">
          <el-upload :before-upload="handleBeforeUpload" action="/" class="avatar-uploader">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div>{{ this.recordform.fileName }}</div>
          <div>支持jpg/png/pdf等常见图片/文件格式</div>
        </el-form-item>
        <el-form-item label="跟进说明" prop="followRemark">
          <el-input v-model="recordform.followRemark" clearable maxlength="200" type="textarea"
                    show-word-limit rows="4"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="saveRecord" :loading="saveLoading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addFollow } from '@/api/operate/automarket'
import { uploadInterface } from '@/api/operate/verbalTrick'

export default {
  components: {},
  data() {
    return {
      dialogFollowVisible: false,
      recordform: {
        followState: '',
        followTime: '',
        followWay: '',
        otherWay: '',
        followContent: [],
        otherContent: '',
        enclosureUrl: '',
        followRemark: '',
        fileName: ''
      },
      rules: {
        followState: [{ required: true, message: '请选择跟进阶段', trigger: 'change' }],
        followTime: [{ required: true, message: '请选择跟进时间', trigger: 'change' }],
        followWay: [{ required: true, message: '请选择跟进方式', trigger: 'change' }],
        otherWay: [{ required: true, message: '请填写其他跟进方式', trigger: 'blur' }],
        followContent: [{ required: true, message: '请选择跟进内容', trigger: 'change' }],
        otherContent: [{ required: true, message: '请填写其他跟进内容', trigger: 'blur' }]
      },
      statusList: [],
      followWayOptions: [],
      followContentOptions: [],
      saveLoading: false,
      followmsg: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted() {
    this.getDicts('follow_way').then((res) => {
      if (res.code === 200) {
        this.followWayOptions = res.data
      }
    })
    this.getDicts('follow_content').then((res) => {
      if (res.code === 200) {
        this.followContentOptions = res.data
      }
    })
    this.getDicts('follow_states').then((res) => {
      if (res.code === 200) {
        this.statusList = res.data
      }
    })
  },
  methods: {
    openDialog(value) {
      // 打开
      this.dialogFollowVisible = true
      this.followmsg = value
      this.recordform = {
        followState: '',
        followTime: '',
        followWay: '',
        otherWay: '',
        followContent: [],
        otherContent: '',
        enclosureUrl: '',
        followRemark: '',
        fileName: ''
      }
      this.$refs.recordform.resetFields()
    },
    saveRecord() {
      this.$refs.recordform.validate((valid) => {
        if (valid) {
          this.handleSaveRecord()
        } else {
          return false
        }
      })
    },
    async handleBeforeUpload(file) {
      console.log(file)
      if (this.total >= 9) {
        this.$message.error('')
        return false
      }
      if (!this.handleCheckFile(file)) return false
      try {
        const formData = new FormData()
        formData.append('file', file)
        this.dialogLoading = true
        let res = await uploadInterface(formData)
        if (res.code === 200) {
          this.recordform.enclosureUrl = window.globalConfig.IMAGE_API + res.data.url
          this.recordform.fileName = file.name
          console.log(1111)
        }
        this.dialogLoading = false
      } catch (error) {
        this.dialogLoading = false
      }
    },
    handleCheckFile(file) {
      const size = file.size / 1024 / 1024
      if (file.type.includes('image/') && size > 2) {
        this.$message.error('图片大小不能超过2M')
        return false
      } else if (size > 20) {
        this.$message.error('文件大小不能超过20M')
        return false
      }
      return true
    },
    handleSaveRecord() {
      const params = {
        ...this.recordform,
        followContent: this.recordform.followContent?.toString(),
        sid: this.followmsg.sid
      }
      this.saveLoading = true
      addFollow(params)
        .then(res => {
          this.saveLoading = false
          if (res.code === 200) {
            this.$message.success(res.msg || '操作成功')
            this.dialogFollowVisible = false
            this.$refs.recordform.resetFields()
          }
        })
        .catch(() => {
          this.saveLoading = false
        })
    },
    cancelAdd() {
      this.dialogFollowVisible = false
      this.recordform.fileName = ''
      this.$refs.recordform.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";

.foot {
  display: flex;
  justify-content: right;
}

.avatar-uploader {
  width: fit-content;
  border: 1px dashed #DCDFE6;
}
</style>
